<template lang="html">

    <el-form :model="formInline" :rules="rules" ref="formInline" label-width="120px" :label-position="'right'">
        <br>
        <el-row>
             <el-col :span="12">
                <el-form-item label="彩币ID:" prop="colorId">
                    <el-col :span="24">
                        <el-input v-model="formInline.colorId" placeholder="彩币ID:" :disabled="true">
                        <template slot="append"><el-color-picker class="colorclick" v-model="formInline.colorId"></el-color-picker></template>
                      </el-input>
                    </el-col>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="11">
                <el-form-item label="@币:" prop="baseCoinType">
                    <el-input v-model="formInline.baseCoinType" placeholder=""></el-input>
                </el-form-item>
            </el-col> -->
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="彩币中文名称:" prop="name">
                    <el-input v-model="formInline.name" placeholder="彩币中文名称:"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="彩币英文全称:" prop="ename">
                    <el-input v-model="formInline.ename" placeholder="彩币英文全称:"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="彩币英文简称:" prop="shortName">
                    <el-input v-model="formInline.shortName" placeholder="彩币英文简称:"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="发行主体:" prop="issuingSubject">
                    <el-input v-model="formInline.issuingSubject" placeholder="发行主体:"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="官方网站:" prop="contractUrl">
                    <!-- <el-input type="number" @change="checkBaseAmount(formInline.baseAmount)" v-model.number="formInline.baseAmount" placeholder="发行规模:"></el-input> -->
                    <el-input v-model="formInline.contractUrl" placeholder="官方网站:">
                        <template slot="prepend">http://</template>
                    </el-input>
                    <!-- <Patternipt
                    class="el-input__inner"
                    maxlength="16"
                    placeholder="官方网站"
                    :regExp="setting.regExp"
                    :replacement="setting.replacement"
                    v-model="formInline.baseAmount"
                    ></Patternipt> -->
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="发行量:" prop="totalAmount" >
                    <!-- <el-input type="number" ref="ipt" v-model.number="formInline.totalAmount" @change="checkNumber" placeholder="发行量:"></el-input> -->
                    <!-- <el-input ref="ipt" v-model.number="formInline.totalAmount" @change="checkNumber" placeholder="发行量:"></el-input> -->
                    <el-input-number class="elitem" auto-complete="off" :min="0" :max="1000000000000000" @change="checkNumber" :controls="false" v-model.number="formInline.totalAmount" placeholder="发行量:"></el-input-number>

                    <!-- <Patternipt
                    name="totalAmount"
                    class="el-input__inner"
                    maxlength="16"
                    placeholder="发行量"
                    :regExp="setting.regExp"
                    :replacement="setting.replacement"
                    v-model.number="formInline.totalAmount"
                    ></Patternipt> -->
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="23">
                <el-form-item label="彩币描述:" prop="description">
                    <el-input type="textarea" :maxlength="251" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" v-model="formInline.description"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="11">
                <el-form-item label="logo:" prop="logoUrl">
                    <el-input type="hidden" v-model="formInline.logoUrl" placeholder="logoUrl:"></el-input>
                    <UploadImg
                        @onChange="getLogoUrl"
                        :targetUrl="'path'"
                        :imgSrc="formInline.logoUrl"
                    ></UploadImg>
                </el-form-item>
            </el-col>
        </el-row>

        <el-form-item>
            <el-button type="primary" @click="submitForm('formInline',2)">提交</el-button>
            <el-button type="primary" @click="submitForm('formInline',1)">保存</el-button>
            <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
    </el-form>


</template>

<script>
import UploadImg from '@/components/commons/uploadimg';
import Patternipt from '@/components/commons/patternipt';

export default {
    name: 'applyforissuing',
    components: {
        UploadImg, Patternipt
    },
    data() {
        var checkAmount = (rule, value, callback) => {
            // console.log(this.$refs.ipt);
            if (!value) {
                return callback(new Error('请输入正确的数字类型'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入正整数'));
            } else {
                if (value > 1000000000000000) {//千亿
                    callback(new Error('超出最大输入'));
                } else {
                    callback();
                }
            }
        };
        return {
            msg: 'applyforissuing',
            setting: {
                regExp: /^[0\D]*|\D*/g,
                replacement: '',
            },
            formInline: {
                colorId: "",//彩色币ID
                baseCoinType: "",//@币（基础币）
                name: "",//彩色币名称
                ename: "",//英文名称
                shortName: "",//彩色币简称
                issuingSubject: "",//发行主体
                contractUrl: "",//官方网站
                totalAmount: "",//发行量
                description: "",//描述
                // idSeq         : "",//唯一标识
                logoUrl: "",//LOGO图片url
                // status        : 2,//状态 1：暂存 2：提交（待审核） 3：初审未通过 4：终止 5：初审通过 6：待终审 7：终审未通过 8：终审通过
            },

            rules: {
                colorId: [
                    { required: true, message: '请输入彩色币色值', trigger: 'change' },
                ],
                baseCoinType: [
                    // { required: true, message: '请输入@币（基础币）', trigger: 'blur' },
                ],
                name: [
                    // { required: true, message: '请输入彩色币名称', trigger: 'blur' },
                ],
                ename: [
                    { required: true, message: '请输入彩色币英文名称缩写', trigger: 'blur' },
                ],
                shortName: [
                    { required: true, message: '请输入彩色币英文简称', trigger: 'blur' },
                ],
                issuingSubject: [
                    { required: true, message: '请输入发行主体', trigger: 'blur' },
                ],
                contractUrl: [
                    { required: true, message: '请输入正确的官方网站', trigger: 'blur' },
                ],
                totalAmount: [
                    { required: true, type: 'number', message: '请输入正确的发行量', trigger: 'change' },
                    { validator: checkAmount, trigger: 'change' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                ],
                logoUrl: [
                    { required: true, message: '请添加LOGO图片', trigger: 'change' },
                ],
            }
        }
    },
    created() {
        this.getTempData();
    },
    mounted() {

    },
    methods: {
        checkNumber(val) {
            // console.log(val);
            // this.$set('formInline.totalAmount',Math.abs(this.formInline.totalAmount))
            // console.log(this.$refs.ipt.$el.children[0].value);
            this.formInline.totalAmount = Math.abs(Math.ceil(this.formInline.totalAmount));
        },
        // 获取暂存数据
        getTempData() {
            this.$http({
                url: 'issue/api/v1/issue/order/tempInssueOrder',
                method: 'get'
            }).then((res) => {
                let data = res.data;
                if (data.responseCode === 1) {
                    if (data.responseData) {
                        this.formInline = data.responseData;
                        this.formInline.colorId = '#' + this.formInline.colorId;
                    }
                }
            })
        },
        // 重置
        resetForm(formName, callback) {
            // delete this.formInline.idSeq;
            this.$refs[formName].resetFields();
            if (!this.formInline.idSeq || this.formInline.idSeq == '') {
                return;
            }
            this.$http({
                url: 'issue/api/v1/issue/order/issueOrdewr/' + this.formInline.idSeq,
                method: 'delete'
            }).then((res) => {
                let data = res.data;
                if (data.responseCode === 1) {

                    if (callback) {
                        callback()
                    } else {
                        this.$notify({
                            title: '成功',
                            message: '重置成功',
                            type: 'success',
                            duration: 2000
                        });
                    }

                }
            })
        },
        // 提交
        submitForm(formName, status) {
            this.formInline.status = status;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.transformColorID();//转换颜色
                    this.$http({
                        url: 'issue/api/v1/issue/order/issueOrder',
                        method: 'post',
                        body: this.formInline
                    }).then((res) => {
                        let data = res.data;
                        if (data.responseCode === 1) {
                            this.$notify({
                                title: '成功',
                                message: '提交成功',
                                type: 'success',
                                duration: 2000
                            });
                            // 提交状态
                            if (status === 2) {

                                this.resetForm(formName, function() {
                                    this.$router.push({ name: 'issuinglist' });
                                });

                            }
                        } else {
                            this.$notify({
                                title: '失败',
                                message: data.responseData,
                                type: 'error',
                                duration: 2000
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        getLogoUrl(params) {
            this.$http({
                url: 'issue/api/v1/issue/order/imgUpload',
                method: 'post',
                body: params
            }).then((res) => {
                let data = res.data;
                if (data.responseCode === 1) {
                    this.formInline.logoUrl = data.responseData;
                } else {
                    this.$notify({
                        title: '失败',
                        message: '上传成功',
                        type: 'error',
                        duration: 2000
                    });
                }
            })
        },
        transformColorID() {
            if (this.formInline.colorId) {
                this.formInline.colorId = this.formInline.colorId.replace('#', '');
            }
        },
    }
}
</script>

<style lang="less">
.coloript {
    display: inline-block;
    vertical-align: middle;
}

.colorclick {
    display: inline-block;
    vertical-align: middle;
}

.elitem {
    width: 100%;
}
</style>
